<template>
	<view class="buy-vip">
		<image class="banner" src="/static/img/mine/vip-banner.png"></image>
		<view class="vip-right">
			<text class="title">会员权益</text>
			<image class="poster" src="/static/img/mine/ticket.png"></image>
			<view class="info">充值￥{{price}}获得会员，立即享受{{serviceCount}}次优惠购需要绑定门店使用</view>
			<view class="agreement">
				<image class="icon" @tap="toogleSelect" :src="isSelect ? '/static/img/mine/selected.png' : '/static/img/mine/is-select.png'"></image>
				<text class="tag" @tap="goAgreement">同意<text class="go">《会员协议》</text></text>
			</view>
		</view>
		<view class="bottom">
			<view class="price-box">￥<text class="price">{{price}}</text></view>
			<view class="buy" @tap="buy">立即开通</view>
		</view>
	</view>
</template>

<script>
	import {
		buyVip,
		getBuyInfo
	} from '@/commen/js/config'
	import storage from '@/commen/utils/storage'

	export default {
		data() {
			return {
				price: 0, // 开通价格
				serviceCount: 0, // 服务次数
				isSelect: false, // 是否认同协议
			};
		},
		mounted() {
			this.getBuyInfo()
		},
		methods: {
			// 认同/取消认同协议
			toogleSelect() {
				this.isSelect = !this.isSelect
			},
			// 获取开通所需的信息
			async getBuyInfo() {
				const [err, res] = await getBuyInfo()
				if (!res) return
				this.price = res.info.price
				this.serviceCount = res.info.service_number
			},
			// 开通
			async buy() {
				if (this.$isEmpty(this.isSelect, '请先同意会员协议！')) return
				const params = {
					token: storage.get('token')
				}
				const [commitErr, commitRes] = await buyVip(params)
				if (!commitRes) return
				const [payErr, payRes] = await new Promise((resolve, reject) => {
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: String(commitRes.pay_info.timeStamp),
					    nonceStr: commitRes.pay_info.nonceStr,
					    package: commitRes.pay_info.package,
					    signType: commitRes.pay_info.signType,
					    paySign: commitRes.pay_info.paySign,
					    success: function (res) {
							resolve(res)
					    },
					    fail: function (err) {
							reject(err)
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				}).then(res => [null, res]).catch(err => [err])
				if (payRes) {
					this.$toast('开通成功')
					uni.$emit('refreshUserInfo')
					setTimeout(() => {
						this.$open('/pages/mine/vip-right/vip-right', {
							type: 'hide'
						}, 1)
					}, 1500)
				}
			},
			// 前往协议
			goAgreement() {
				this.$open('/pages/common/agreement/agreement')
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.buy-vip {
		@include box-w(100%, $bg-g);

		.banner {
			@include box(100%, 316rpx);
		}

		.vip-right {
			margin: 80rpx 0 136rpx;
			padding: 0 30rpx;

			.title {
				@include font-set($font-d, $bg-a, 500);
			}

			.poster {
				@include box-b(500rpx, 228rpx);
				margin: 28rpx auto 0;
			}

			.info {
				@include box-w(460rpx);
				margin: 0 auto;
				@include font-set($font-b, $color-c);
			}

			.agreement {
				@include bottom(155rpx, fixed)
				@include box-w(100%);
				@include flex-row(flex-start);
				@include font-set($font-b, $color-d);
				padding: 0 30rpx;

				.icon {
					@include square(42rpx);
					margin-right: 22rpx;
				}
				
				.go{
					color:#333;
				}
			}
		}

		.bottom {
			@include box(100%, 136rpx, $bg-c);
			@include bottom(0, fixed);
			@include flex-row();

			.price-box {
				@include box(342rpx, 100%);
				@include flex-row(flex-start);
				padding: 0 30rpx;
				@include font-set($font-a, $color-i, 500);

				.price {
					font-size: 56rpx;
				}
			}

			.buy {
				@include box(408rpx, 100%, $bg-a);
				@include flex-row();
				@include font-set(44rpx, $color-a, 500);
			}
		}
	}
</style>
